<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <link rel="icon" sizes="32x32"
    href="http://47.113.225.145:9000/pureut/2024/10/25/82c224de39ee4165beb270e38bb3f9b8.png" />
  <link rel="stylesheet" type="text/css" media="print" href="./public/print-lock.css" />
  <link type="text/css" href="./src/assets/styles/loading.scss" />
  <title>EHS安全隐患管理系统</title>
  <!--[if lt IE 11
      ]><script>
        window.location.href = '/html/ie.html'
      </script><!
    [endif]-->

  <style>
    html,
    body,
    #app {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }

    .chromeframe {
      margin: 0.2em 0;
      background: #ccc;
      color: #000;
      padding: 0.2em 0;
    }

    .logo {
      position: absolute;
      right: 0px;
      top: 0px;
      width: 500px;
      height: 120px;
    }

    #loader-wrapper {
      position: fixed;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1000;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
      /* background: linear-gradient(to right, #337ecc, #409eff, #a0cfff); */
      background-image: url('./src/assets/bglogin.jpg');
      background-size: 100% 100%;
    }

    @keyframes loader-title {
      0% {
        margin-left: 0px;
      }

      50% {
        margin-left: 10px;
      }

      75% {}

      100% {
        margin-left: 0px;
      }
    }

    .load_title {
      color: #fff;
      font-size: 50px;
      margin-left: 40px;
    }

    .rotate {
      transform: rotate(260deg);
    }

    .my-words {
      letter-spacing: 1px;
      margin: 150px auto;
      text-align: center;
      font-weight: 400;
      text-transform: uppercase;
      font-size: 7rem;
      color: rgb(250, 1, 1);
    }

    .my-words .title-tiao:nth-child(2n) {
      color: rgb(250, 1, 1);

      ;
    }

    .my-words .title-tiao:nth-child(3n) {
      color: rgb(250, 1, 1);

      ;
    }

    .my-words .title-tiao:nth-child(5n) {
      color: rgb(250, 1, 1);

      ;
    }

    .my-words .title-tiao:nth-child(7n),
    .my-words .title-tiao:nth-child(12n) {
      color: rgb(250, 1, 1);

      ;
    }

    .title-tiao {
      position: relative;
      font-size: 40px;
      font-weight: 700;
    }

    .title-tiao:nth-child(7) {
      animation: title-tiao 1s linear infinite;
    }

    @keyframes title-tiao {
      0% {
        top: 0px;
      }

      50% {
        top: -50px;
      }

      100% {
        top: 0;
      }
    }

    .loading-next {
      margin-top: -300px;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, #23272e, #0a7ae2, #23272e);
    }

    .loading-next .loading-next-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .loading-next .loading-next-box-warp {
      width: 100px;
      height: 100px;
    }

    .loading-next .loading-next-box-warp .loading-next-box-item {
      width: 33.333333%;
      height: 33.333333%;
      /* background: #0cf493; */
      float: left;
      animation: loading-next-animation 1.2s infinite ease;
      border-radius: 1px;
    }

    .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(7) {
      animation-delay: 0s;
    }

    .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(4),
    .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(8) {
      animation-delay: 0.1s;
    }

    .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(1),
    .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(5),
    .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(9) {
      animation-delay: 0.2s;
    }

    .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(2),
    .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(6) {
      animation-delay: 0.3s;
    }

    .loading-next .loading-next-box-warp .loading-next-box-item:nth-child(3) {
      animation-delay: 0.4s;
    }

    .loading-next-box-item:nth-child(1) {
      background-color: #529b2e;
    }

    .loading-next-box-item:nth-child(2) {
      background-color: #95d475;
    }

    .loading-next-box-item:nth-child(3) {
      background-color: #e1f3d8;
    }

    .loading-next-box-item:nth-child(4) {
      background-color: #b88230;
    }

    .loading-next-box-item:nth-child(5) {
      background-color: #eebe77;
    }

    .loading-next-box-item:nth-child(6) {
      background-color: #f8e3c5;
    }

    .loading-next-box-item:nth-child(7) {
      background-color: #c45656;
    }

    .loading-next-box-item:nth-child(8) {
      background-color: #f89898;
    }

    .loading-next-box-item:nth-child(9) {
      background-color: #fcd3d3;
    }

    @keyframes loading-next-animation {

      0%,
      70%,
      100% {
        transform: scale3D(1, 1, 1);
      }

      35% {
        transform: scale3D(0, 0, 1);
      }
    }
  </style>

</head>

<body>
  <div id="app">


    <div id="loader-wrapper">
      <div class="my-words">
        <!-- <img class="logo" src="./src/assets/logo/logo-03.png" alt="" /> -->
        <span class="title-tiao">E</span>
        <span class="title-tiao">H</span>
        <span class="title-tiao">S</span>
        <span class="title-tiao">安</span>
        <span class="title-tiao">全</span>
        <span class="title-tiao">隐</span>
        <span class="title-tiao">患</span>
        <span class="title-tiao">管</span>
        <span class="title-tiao">理</span>
        <span class="title-tiao">系</span>
        <span class="title-tiao">统</span>

        <div class="loading-next">
          <div class="loading-next-box">
            <div class="loading-next-box-warp">
              <div class="loading-next-box-item"></div>
              <div class="loading-next-box-item"></div>
              <div class="loading-next-box-item"></div>
              <div class="loading-next-box-item"></div>
              <div class="loading-next-box-item"></div>
              <div class="loading-next-box-item"></div>
              <div class="loading-next-box-item"></div>
              <div class="loading-next-box-item"></div>
              <div class="loading-next-box-item"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script type="module" src="/src/main.js"></script>
</body>

</html>